<template>
<div>
              <ProTable
                :data="tableData"
                :column="column"
                :elProps="elProps"
                :page="[]"
                :rowControl="[]"
                :disabled="[]"
                :controlWidth="{
                  name:500
                }"
              >
                    <template  #default="{propname,row}">
                    <div v-if="propname == 'name'">
                        <div>{{row[propname]}}</div>
                    </div>
                    </template>
                    <template #search_operate>
                        <el-table-column   min-width="200px" label="操作" >
                          <template #default="scope">
                              <el-link  type="primary" @click="addProduct(scope.row.product,scope.$index)" :underline="false">
                                  添加產品
                              </el-link>
                              <el-popconfirm
                                  confirm-button-text="確認"
                                  cancel-button-text="NO"
                                  title="確認刪除該數據?"
                                   @confirm="confirmEvent"
                                >
                                  <template #reference>
                              <el-link class="ml-[15px]" @click="deleteProduct(scope.$index, scope.row)" type="primary" :underline="false">
                                  刪除
                              </el-link>    
                                <!-- <el-button type="danger" icon="Delete" @click="deleteProduct(scope.$index, scope.row)" circle  ></el-button > -->
                                </template>
                              </el-popconfirm>
                          </template>
                        </el-table-column>
                  </template>
              </ProTable>
     <productTable ref="productTableRef" @setSchoolProduct="setSchoolProduct"></productTable>
</div>
</template>

<script setup>
import { ref,watch } from 'vue' 
import {elProps} from './index'
import productTable from './productTable.vue'

const column = {
        name:'學校名稱',
}
const props = defineProps({
    list:Object
})
const tableData = ref([])
tableData.value = props.list
watch(()=>props.list,(newval)=>{
tableData.value = newval
console.log(tableData.value);
})
const rowProduct = ref({})
const deleteProduct = (index,row)=>{
      rowProduct.value = row
}
const emit = defineEmits(['del_school','addProduct'])
const confirmEvent = () => {
   emit('del_school',rowProduct.value)
}
   // 添加产品
const productTableRef = ref('')
const addProduct = (row,index)=>{
  console.log(row,index);
    productTableRef.value.init(row,index)
}

const setSchoolProduct = (data,index)=>{
  console.log(data,index);
  tableData.value[index].product = data
console.log(tableData.value,'111');
}
</script>

<style lang='less'  scoped>

</style>